<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧导航</title>
    <style>
        .leftList{
            margin-bottom: 26px;
            overflow: hidden;
        }
        .listTile {
            width: 224px;
            height: 26px;
            line-height: 26px;
            color: #4ea9f3;
            font-size: 16px;
            border-bottom: 1px solid #dfe7ed;
            clear: left;
        }

        .listTile:before {
            content: '';
            height: 17px;
            width: 8px;
            background: #3e97eb;
            display: inline-block;
            vertical-align: middle;
        }

        .listContent {
            width: 224px;
        }

        .listContent span {

            height: 26px;
            line-height: 26px;
            text-align: center;
            border-radius: 13px;
            background: #c5dff4;
            float: left;
            display: inline-block;
            font-size: 12px;

        }
        .listContent span a{
            color: #1685e0;
            text-decoration: none;
        }

        .listContent1 span {
            width: 31%;
            margin: 6px 1% 3px 1%;
        }

        .listContent1 span:last-child {
            width: 40%;
            margin: 6px 1% 3px 1%;
        }

        .listContent2 span {
            width: 23%;
            margin: 6px 1% 3px 1%;
        }

        .listcontent3 table{
            border-collapse:collapse;
            margin-top:12px;
        }

        .listcontent3 table tr:nth-child(1){
            background: #f3f4f5;
        }

        .listcontent3 table tr td{
            border:1px solid #dfe6ec;
            font-size:12px;
            height: 41px;
            width: 72px;
        }




        .wuran1{
            border:1px solid #bdc8f2;
            background: #e6eafa;
            height:25px;
            width: 64px;
            color: #1367cf;
            padding:4px 6px;
            margin-left:2px;
            border-radius: 4px;
        }
        .wuran2{
            border:1px solid #bcf1d4;
            background: #e7faf0;
            height:25px;
            width: 64px;
            color: #44d47d;
            padding:4px 6px;
            margin-left:2px;
            border-radius: 4px;
        }
        .wuran3{
            border:1px solid #f1f0bc;
            background: #faf8e6;
            height:25px;
            width: 64px;
            color: #d1e083;
            padding:4px 6px;
            margin-left:2px;
            border-radius: 4px;
        }

        .wuran4{
            border:1px solid #f2dbbd;
            background: #faf2e6;
            height:25px;
            width: 64px;
            color: #dbb866;
            padding:4px 6px;
            margin-left:2px;
            border-radius: 4px;
        }
        .wuran5{
            border:1px solid #f2bdc3;
            background: #fae6e7;
            height:25px;
            width: 64px;
            color: #cf1329;
            padding:4px 6px;
            margin-left:2px;
            border-radius: 4px;
        }

    </style>
</head>
<body>
<div class="leftList">
    <div class="listTile">
        流域选择
    </div>
    <div class="listContent listContent1">
        <span><a href="#">全部流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">松花江流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">全部流域</a></span>
        <span><a href="#">其他大型湖泊</a></span>
    </div>
</div>

<div class="leftList">
    <div class="listTile">
        区域选择
    </div>
    <div class="listContent listContent2">
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">山东省</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
        <span><a href="#">全国</a></span>
    </div>
</div>

<div class="leftList">
    <div class="listTile">
        水质状况
    </div>
    <div class="listcontent3">
        <table>
            <tr>
                <td>站点</td>
                <td>监测时间</td>
                <td>水质状况</td>
            </tr>
            <tr>
                <td>河北石家庄
                    向南水库</td>
                <td>2017-08-03
                    16：30</td>
                <td><span class="wuran1">优</span></td>
            </tr>
            <tr>
                <td>河北石家庄
                    向南水库</td>
                <td>2017-08-03
                    16：30</td>
                <td><span class="wuran2">良</span></td>
            </tr>
            <tr>
                <td>河北石家庄
                    向南水库</td>
                <td>2017-08-03
                    16：30</td>
                <td><span class="wuran3">轻度污染</span></td>
            </tr>
            <tr>
                <td>河北石家庄
                    向南水库</td>
                <td>2017-08-03
                    16：30</td>
                <td><span class="wuran4">中度污染</span></td>
            </tr>
            <tr>
                <td>河北石家庄
                    向南水库</td>
                <td>2017-08-03
                    16：30</td>
                <td><span class="wuran5">重度污染</span></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>